<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="" ref="formRef" :model="form" label-width="250px">
      <!--小程序设置-->
      <div class="common-form">分销设置</div>
      <el-form-item label="是否启用">
        <el-switch v-model="form.is_open" />
      </el-form-item>
      <el-form-item label="分销层级">
        <el-input-number
          v-model="form.level"
          :max="3"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="一级分销比例">
        <el-input v-model="form.first_rate" class="max-w460"
          ><template #suffix>%</template></el-input
        >
      </el-form-item>
      <el-form-item label="二级分销比例" v-show="form.level >= 2">
        <el-input v-model="form.second_rate" class="max-w460"
          ><template #suffix>%</template></el-input
        >
      </el-form-item>
      <el-form-item label="三级分销比例" v-show="form.level >= 3">
        <el-input v-model="form.third_rate" class="max-w460"
          ><template #suffix>%</template></el-input
        >
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getSetApi, setApi } from "@/api/plus/agent/set";
import { ElMessage } from "element-plus";
const form = ref<any>({
  is_open: false,
  level: 3,
  first_rate: 0,
  second_rate: 0,
  third_rate: 0,
});
onMounted(() => {
  getData();
});
function getData() {
  getSetApi().then((res) => {
    form.value = { ...form.value, ...res.data };
    console.log(form.value);
  });
}
//提交表单
const onSubmit = () => {
  setApi(form.value)
    .then((data) => {
      ElMessage({
        message: "恭喜你，设置成功",
        type: "success",
      });
    })
    .catch((error) => {});
};
</script>

<style></style>
